<template>
  <div class="right-view">
    <div class="abb">{{ activeIndex == '1' ? '销售排名' : '访问排名' }}</div>

    <div class="item" v-for="(item, index) in activeIndex == '1' ? orderRank : userRank" :key="item.no">
      <div class="title mr-10" :class="{ active: index < 3 }">{{ item.no }}</div>
      <div class="name">{{ item.name }}</div>
      <div class="count">{{ item.count }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入 计算属性
import { computed } from 'vue'
// 导入仓库
import useEchartStore from '@/stores/echart'

// 接收父组件传递过来的数据
const props = defineProps<{
  activeIndex: string
}>()

// 获取仓库实例

const echartStore = useEchartStore()

// 拿取数据

const orderRank = computed(() => {
  return echartStore.storeEchartData.orderRank
})
const userRank = computed(() => {
  return echartStore.storeEchartData.userRank
})
</script>

<style scoped lang="scss">
.right-view {
  font-size: 12px;
  .item {
    display: flex;
    align-items: center;
    margin: 10px 0;

    .name {
      flex: 1;
    }
    .title {
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      &.active {
        background-color: #333;
        border-radius: 50%;
        color: #fff;
      }
    }
  }
  .abb {
    font-size: 14px;
  }
}
</style>
